<!DOCTYPE html>
<html>
	<head>
		<title>Web Worker Demo</title>
	</head>
	<body>
		<button onclick="startWorker()">开始计算</button>
		<p id="result">
			使用Web Worker的步骤如下：

			创建一个Worker对象，指定要执行的脚本文件路径。
			主线程通过postMessage()方法向Worker线程发送消息。
			Worker线程通过onmessage事件监听消息，并在接收到消息后执行相应的操作。
			Worker线程通过postMessage()方法向主线程发送消息。
			主线程通过onmessage事件监听Worker线程发送的消息，并在接收到消息后执行相应的操作。
			注意事项： - Web Worker不能直接访问DOM，因为它运行在独立的线程中，与页面的主线程隔离。 - Web Worker只能通过消息传递来与主线程通信，不能直接共享数据。 - Web
			Worker只能在同一域中运行，无法跨域访问其他域的脚本文件。

			Web Worker是HTML5提供的一个强大的技术，可以在一定程度上提高页面的性能和用户体验。它可以使开发人员更加灵活地处理复杂的任务，同时不会影响到页面的交互和渲染。
		</p>

		<script>
			// 创建Worker对象
			var worker = new Worker("./index.js");

			// 监听Worker发送的消息
			worker.onmessage = function(event) {
				document.getElementById("result").innerHTML = event.data;
			};

			function startWorker() {
				// 向Worker发送消息
				worker.postMessage("start");
			}
		</script>
	</body>
</html>